<!--,我的,密码修改,-->
<template>
  <view class="box">
    <Header title="修改密码"></Header>
    <view>
      <view class="password-box">
        <uv-form :rules="rules" ref="form" :model="formData">
          <uv-form-item borderBottom prop="oldPassword">
            <uv-input :password="password.oldPassword" placeholder="原密码" v-model="formData.oldPassword" border="solid"
                      inputAlign="left" maxlength="20" :customStyle="{padding:'10rpx 0'}" fontSize="32rpx">
              <template v-slot:suffix>
                <view class="iconfont icon-word" :class="[!password.oldPassword?'icon-password':'icon-password-hide']" @click="password.oldPassword = !password.oldPassword"></view>
<!--                <uv-icon @click="password.oldPassword = !password.oldPassword" v-if="!password.oldPassword"-->
<!--                         name="eye-fill"></uv-icon>-->
<!--                <uv-icon @click="password.oldPassword = !password.oldPassword" v-else name="eye-off"></uv-icon>-->
              </template>
            </uv-input>
          </uv-form-item>
          <uv-form-item borderBottom prop="newPassword">
            <uv-input style="height: 24px;" :password="password.newPassword" placeholder="新密码"
                      v-model="formData.newPassword" border="solid" inputAlign="left" maxlength="20"
                      :customStyle="{padding:'10rpx 0'}" fontSize="32rpx">
              <template v-slot:suffix>
                <view class="iconfont icon-word" :class="[!password.newPassword?'icon-password':'icon-password-hide']" @click="password.newPassword = !password.newPassword"></view>
<!--                <uv-icon @click="password.newPassword = !password.newPassword" v-if="!password.newPassword"-->
<!--                         name="eye-fill"></uv-icon>-->
<!--                <uv-icon @click="password.newPassword = !password.newPassword" v-else name="eye-off"></uv-icon>-->
              </template>
            </uv-input>
          </uv-form-item>
          <uv-form-item borderBottom prop="newPassword2">
            <uv-input style="height: 24px;" :password="password.newPassword2" placeholder="确认密码"
                      v-model="formData.newPassword2" border="solid" inputAlign="left" maxlength="20"
                      :customStyle="{padding:'10rpx 0'}" fontSize="32rpx">
              <template v-slot:suffix>
                <view class="iconfont icon-word" :class="[!password.newPassword2?'icon-password':'icon-password-hide']" @click="password.newPassword2 = !password.newPassword2"></view>
<!--                <uv-icon @click="password.newPassword2 = !password.newPassword2" v-if="!password.newPassword2"-->
<!--                         name="eye-fill"></uv-icon>-->
<!--                <uv-icon @click="password.newPassword2 = !password.newPassword2" v-else name="eye-off"></uv-icon>-->
              </template>
            </uv-input>
          </uv-form-item>
        </uv-form>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class='s-btn-common'>
      <button class="sure-button" :loading="loading" :disabled="disabled" @click="formSubmit">提交</button>
    </view>
  </view>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, watchEffect} from 'vue';
import graceChecker from "@/common/graceChecker";
import api from '@/api/login/login';
import {onReady} from "@dcloudio/uni-app";

const {proxy} = getCurrentInstance();

const password = reactive({oldPassword: true, newPassword: true, newPassword2: true});

let isCommitted = ref(false);
let focus = ref('');
let formData = reactive({
  id: uni.getStorageSync("userInfo").id,
  oldPassword: "",
  newPassword: "",
  newPassword2: ""
});
let rules = reactive({
  oldPassword: {
    checkType: "notnull",
    errorMsg: "请输入原密码",
    trigger: ['blur', 'change']
  },
  // 密码校验
  newPassword: [{
    type: "string",
    required: true,
    message: "请输入新密码",
    trigger: ['blur', 'change']
  }, {
    validator: (rule, value, callback) => {
      //返回true表示校验通过，返回false表示不通过
      return proxy.validate.validateSetPassword(value)
    },
    message: "* 密码应由8-16位数字+大写字母+小写字母+特殊符号组成",
    trigger: ['blur', 'change']
  }
  ],
  newPassword2: [{
    type: 'string',
    required: true,
    message: '请输入确认密码',
    trigger: ['blur', 'change']
  }, {
    validator: (rule, value, callback) => {
      //返回true表示校验通过，返回false表示不通过
      return proxy.validate.validateSetPassword(value)
    },
    message: '* 密码应由8-16位数字+大写字母+小写字母+特殊符号组成',
    trigger: ['blur', 'change']
  },
    {
      validator: (rule, value, callback) => {
        //返回true表示校验通过，返回false表示不通过
        return formData.newPassword == value;
      },
      message: '* 两次密码不一致',
      trigger: ['blur', 'change']
    }
  ],
});

let defectiveValue = (value) => {
  focus.value = value
};
let clean = () => {
  focus.value = ""
};
const loading = ref(false)
const disabled = ref(true)
const form = ref('');

// 监听输入完成
watchEffect(() => {
  if (formData.oldPassword && formData.newPassword && formData.newPassword2) {
    disabled.value = false;
    return
  }
  disabled.value = true
})
// 表单提交
let formSubmit = async (e) => {
  form.value.validate().then(async (valid) => {
    if (!isCommitted.value) {
      isCommitted.value = true;
      let checkRes = graceChecker.check(formData, rules);
      if (!checkRes) {
        isCommitted.value = false;
        uni.showToast({
          title: graceChecker.error,
          icon: "none"
        });
        return;
      }
      if (formData.newPassword != formData.newPassword2) {
        isCommitted.value = false;
        uni.showToast({
          title: '两次密码不一致，请修改后再保存',
          icon: "none"
        });
        return;
      }
      uni.showLoading({
        title: '保存中',
        mask: true,
      });
      let oldPassword = formData.oldPassword;
      let newPassword = formData.newPassword;
      const data = {
        oldPassword,
        newPassword
      }
      let res = await proxy.http.asyncPost(api.updatePwd, data, true, 'HEADER_XWWW');
      if (res.code === 0) {
        await uni.showToast({ title: '修改成功', icon: 'success',duration: 2000});
        setTimeout(() => {
          uni.clearStorageSync();
          uni.reLaunch({url: '/pages/login/login',});
        }, 1500);
      } else {
        isCommitted.value = false;
        uni.showToast({title: res.msg, icon: 'none'});
      }
    }
  })

};
/**找回密码*/
let forgotPassword = () => {
  let phone = uni.getStorageSync("phone");
  if (phone) {
    uni.redirectTo({
      url: "/pages/my/forgot-password",
    });
  } else {
    uni.showToast({
      title: '未绑定手机号',
      icon: "none"
    });
  }
};

let cleanValue = (item) => {
  formData[item] = '';
}

</script>

<style lang="scss" scoped>
.box {
  background-color: var(--uni-bg-color-white);
}

.focus {
  border-bottom: 1px solid #1977FF !important;
}
.icon-word {
  color: rgba(0,0,0,.26);
}

::v-deep .uv-form .uv-form-item:last-child .uv-line{
  display: block!important;
}

.password-box {
  width: calc(100vw - 104rpx);
  margin: 50rpx auto 80rpx;
}

.bottom-box {
  position: relative;
}
</style>
